<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Look-Up</title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>

<body>
    <div id="contenedor">	
        <div id="encabezado"></div>
        <div id="cuerpo">
  	    	<div id="formulario">
                <div id="txtBuscarContainer">
                <input type="text" id="txtBuscar" name="txtBuscar" />
                </div>
                <br />
                <img src="images/btnBuscar.png" width="144" height="42" id="btnBuscar" />
            </div>
            <div id="resultados" style="display:none;">
            	<h2>Resultados de búsqueda: <label id="lblBuscado"></label></h2>
                
                <!-- TEMPLATE RESULTADO -->
                   
                <div id="areaResultados"></div>
                <!-- FIN TEMPLATE RESULTADO -->
            </div>
        </div>
        <div id="pie"></div>
    </div>


</body>
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.templ.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.highlight-3.js"></script>

<script id="templateResultados" type="text/x-jquery-templ">
        <div class="resultado">
                <a class="titulo" href="{{= urlWIki}}">{{= titulo}}</a>
                <p class="descripcion">{{= resultado}}</p>
        </div>
</script>

<script language="javascript" type="text/javascript">
	jQuery(document).ready(function(){
            $('#txtBuscar').focus();
            $("#btnBuscar").click(buscar);
            $('#txtBuscar').bind('keypress', function(e) {
                if(e.keyCode==13){
                    buscar();
                }
            });
            cambiarFondo();
        });
        
        function buscar() {
            $.post("buscar.jsp", {busqueda : $("#txtBuscar").val()}, function(info){
                cambiarFondo();
                $('#areaResultados').empty();
                eval('var resultado='+info);
                if(resultado == null || resultado.length == 0)
                    $("#lblBuscado").text('No se encontraron coincidencias');
                else
                { 
                    $('#templateResultados').tmpl(resultado).appendTo('#areaResultados');
                    $("#lblBuscado").text($("#txtBuscar").val());  
                    $(".descripcion").highlight($("#txtBuscar").val());
                }
                $("#resultados").fadeIn();
                $('#txtBuscar').focus();
            });
        }
        var contador = 1;
        function cambiarFondo(){
            //$('body').css('background-color', 'url(images/bg' + contador +'.png) repeat-x top #1c1c1c;')
            $('body').css('background-image', 'url(images/bg' + contador +'.png)');
            /*
            $('body').fadeTo('slow', 0.4, function()
            {
                $(this).css('background-image', 'url(images/bg' + contador +'.png)');
            }).delay(10).fadeTo('slow', 1);
            */
            contador = 1 + Math.floor(Math.random()*6)
            //setTimeout(cambiarFondo, 1000);
        }
</script>
</html>
